<template>
    <div id="withdraw">
        <p class="page-title">余额提现</p>
        <div class="container padder" v-loading="pageLoading">
            <el-tabs v-model="activeName">
                <el-tab-pane label="快速提现" name="first">
                    <div class="form">
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px"
                                 class="demo-ruleForm el-form">
                            <el-form-item label="可用余额：" prop="">
                                <span class=" text-danger text-2x ">{{data.zhanghu_yue / 100}}</span>
                                <sub class="m-l-xs text-sm text-muted">元</sub>
                            </el-form-item>
                            <el-form-item label="提现金额：" prop="jine">
                                <el-input type="number" v-model.number="ruleForm.jine" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="收款方式：" class="m-t-lg">

                                <div class="payType">
                                    <img src="../../assets/imgs/alipay.png"
                                         v-if="data.tixian_xinxi_data.shoukuan_fangshi === 1" alt="">
                                    <img src="../../assets/imgs/wepay.svg"
                                         v-if="data.tixian_xinxi_data.shoukuan_fangshi === 2" alt="">

                                </div>
                            </el-form-item>
                            <el-form-item>
                            </el-form-item>
                        </el-form>
                        <div class="bottom text-center b-t padder-v">
                            <el-button type="primary" @click="withdraw" :loading="btnLoading">立即提现</el-button>
                        </div>
                        <div class="m-t p">
                            <div><span class="text-danger">*</span> <span class="text-md m-l-xs font-bold">注意事项：</span>
                            </div>
                            <div>
                                <p>1,单笔提现金额≥100元，手续费1%，72小时内处理</p>
                                <p class="m-t-sm">2,商户余额满100元后第二天自动申请提现</p>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="提现记录" name="second">
                    <el-table
                            :data="data.tixian_jilu_data"
                            style="width: 100%">
                        <el-table-column
                                prop="ddh"
                                label="单号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="leixing"
                                label="类型"
                                width="180">
                            <template v-slot="scope">
                                {{scope.row.leixing === 1?'支付宝':'微信'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="账号">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="收款图">
                            <template v-slot="scope">
                                <el-image
                                        @click="$imgPreview(scope.row.img)"
                                        style="width: 100px; height: 100px"
                                        :src="scope.row.img"
                                >
                                </el-image>

                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="jine"
                                label="金额">
                            <template v-slot="scope">
                                {{scope.row.jine / 100}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="create_time"
                                label="申请时间">
                        </el-table-column>
                        <el-table-column
                                prop="zhuangtai"
                                label="状态">
                            <template v-slot="scope">
                                {{scope.row.zhuangtai | statusToStr}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--   <pagination></pagination>-->
                </el-tab-pane>
            </el-tabs>


        </div>
    </div>
</template>

<script>
    export default {
        name: 'withdraw',
        components: {},
        data() {
            return {
                pageLoading: true,
                activeName: 'first',
                ruleForm: {
                    jine: '',
                },
                rules: {
                    jine: [
                        {required: true, message: '请输入提现金额'},
                        {
                            type: 'number', min: 10, message: '提现金额必须大于10', transform(val) {
                                return +val
                            }
                        }
                    ]
                },
                tableData: [],
                data: {
                    tixian_xinxi_data: {},
                    zhanghu_yue: '',
                    tixian_jilu_data: []
                },
                btnLoading: false
            }
        },
        computed: {},
        filters: {
            statusToStr(val) {
                let obj = {
                    1: '等待处理',
                    2: '提现成功',
                    3: '提现驳回',
                };
                return obj[val]
            }
        },
        methods: {
            //获取是否设置提现信息
            getWithdraw() {
                this.pageLoading = true;
                this.$axios.post(`/api/user/get_tixian`)
                    .then(res => {
                        this.pageLoading = false;
                        if (res.code === `200`) {
                            this.data = res.data;
                        } else {
                            this.$router.push('/account/withdraw')
                        }
                    })
            },
            //提现
            withdraw() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.btnLoading = true;
                        this.$axios.post(`/api/user/up_tixian`, this.ruleForm)
                            .then(res => {
                                this.btnLoading = false;
                                if (res.code === `200`) {
                                    this.$message.success(res.msg);
                                    this.getWithdraw();
                                }
                            })
                    }
                })

            }
        },
        created() {
            this.getWithdraw();
        },
    }
</script>

<style lang="less" scoped>
    .form {
        width: 500px;

        .payType {
            .el-radio {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
            }

            img {
                margin-right: 20px;
                cursor: pointer;
            }
        }
    }
</style>
